
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>${obj.name!}讲师</title>
    <link rel="stylesheet" href="${root}assets/third/seedsui/plugin/seedsui/seedsui.min.css">
</head>

<body ontouchstart="">
<header>
        	<div class="titlebar reverse">
                <a href="javascript:back();">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1 class="text-center">${obj.name!}</h1>
                
            </div>
        </header>
    	<article style="background-color: white;">
    			<ul class="list between border-content">
                    <li>
                        <div class="justify">
                            <div class="photo bg-6" style="background-image: url('${www}${obj.img}');">
                            </div>
                        </div>
                        <div class="justify-content">
                            <p>${obj.name}</p>
                            <small class="top right">&nbsp;</small>
                            <small class="nowrap">${obj.courses.~size!0}课程</small>
                        </div>
                        <div class="justify box box-middle">
                            <button onclick="alert('即将支持!');" class="button cancel">关注</button>
                        </div>
                    </li>
                </ul>
                <ul class="tabbar animate-slide width-full" data-col="6" id="tabbar">
                <li class="tab">
                    <label class="tab-label">课程</label>
                </li>
                <li class="tab">
                    <label class="tab-label">简介</label>
                </li>
                <li class="tab">
                    <label class="tab-label">套餐</label>
                </li>
                <li class="tab">
                    <label class="tab-label"></label>
                </li>
                <li class="tab">
                    <label class="tab-label"></label>
                </li>
                <li class="tab">
                    <label class="tab-label"></label>
                </li>
                <hr/>
            </ul>
            <div class="slider-container" id="carouselPage" >
                <div class="slider-wrapper">
                	
                	<div class="slider-slide">
                	<ul id="course_list" class="grid album" data-col="2" style="background-color:white;" >
                <!--:for(course in obj.courses!){  -->
                <li onclick="location.href='${root}course/${course.id}'">
                    <a style="background-image: url(${www}${course.img});">
                    <div class="sticker top right">
                    <!--:if(course.price>0){  -->
                    <span>￥${course.price,"#"}</span>
                    <!--:}else{  -->
                    <span>NEW</span>
                    <!--:}  -->
                    </div>
                        <label class="bottom" style="background-color: black;width: 100%;position: absolute;bottom: 0px;left: 0px;">
                        <small class="nowrap" style="width: 100%;display: inline-block;">${course.title}</small></label>
                    </a>
                    <div style="text-align: left;">
                    <small><i class="icon icon-time" style="font-size: 12px;width: 12px;height: 12px;"></i>${course.section}章节</small>
                     <!--:if(course.price>0){  -->
                    <small style="float: right;color: red;">￥${course.price}</small>
                     <!--:}else{  -->
                    <small style="float: right;color: red;">免费</small>
                     <!--:}  -->
                    </div>
                </li>
                <!--:}  -->
            </ul>
                	</div>
                	<div class="slider-slide" style="padding-left: 10px;padding-right: 10px;">
                	<br/>
                	<small style="color: black;">
                	&nbsp;&nbsp;&nbsp;&nbsp;${obj.text}</small>
                	</div>
                	<div class="slider-slide">
                	<ul id="combo_list" class="grid album" data-col="2" style="background-color:white;" >
                <!--:for(combo in obj.combos!){  -->
                <li onclick="location.href='${root}combo/${combo.id}'">
                    <a style="background-image: url(${www}${combo.img});">
                    <div class="sticker top right">
                    <span>${combo.oldprice/combo.price,"#.#"}折</span>
                    </div>
                        <label class="bottom" style="background-color: black;width: 100%;position: absolute;bottom: 0px;left: 0px;">
                        <small class="nowrap" style="width: 100%;display: inline-block;">${combo.title}</small></label>
                    </a>
                    <div style="text-align: left;">
                    <small><i class="icon icon-time" style="font-size: 12px;width: 12px;height: 12px;"></i>${combo.section}课程</small>
                    
                    <small style="float: right;color: red;">￥${combo.price}</small>
                    
                    </div>
                </li>
                <!--:}  -->
            </ul>
                	</div>
                </div>
            </div>
        </article>
        	
    <script src="${root}assets/third/jquery/jquery-2.1.3.min.js"></script>
    <script src="${root}assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
    <script type="text/javascript">
    var carouselPage;
    function initSlider(){
        carouselPage=new Slider("#carouselPage",{
            "onSlideChangeEnd":function(e){
                tabActive(e.index);
            }
        });
       
    }
    /*==========
    页签
    ===========*/
    var tabbar=document.getElementById("tabbar");
    var tab=tabbar.querySelectorAll(".tab");
    //选中tab
    function tabActive(index){
        for(var i=0,t;t=tab[i++];){
            t.classList.remove("active");
        }
        tab[index].classList.add("active");
    }
    //初始化tabbar
    function initTabbar(){
        for(var i=0,t;t=tab[i++];){
            (function(i){
                t.addEventListener("click",function(){
                    carouselPage.slideTo(i-1);
                    tabActive(i-1);
                },false);
            })(i);
        }
    }
    window.addEventListener("load",function(){
        initSlider();
        initTabbar();
        
    },false);
		//定义exmobi返回
		function back(){history.go(-1);}
    </script>
</body>
</html>